<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">
    <com1>
      <p></p>
    </com1>
    <com2></com2>
  </div>

  <script src="./scripts/vue.js"></script>
  <script>

    // 首先创建一个事件中心，就是新的实例
    var hub = new Vue({})

    // Vuex

    Vue.component('com1', {
      data: function () {
        return {
          name: 'Tom',
          age: 3
        }
      },
      template: `
        <div>
          <h4>子组件 1</h4>
          <p>{{ age }}</p>
          <hr />
        </div>
      `,
      mounted () {
        hub.$on('myevent', (params) => {
          console.log(params)
          this.age = params
        })
      }
    })

    Vue.component('com2', {
      data: function () {
        return {
          name: 'Tom',
          age: 10
        }
      },
      template: `
        <div>
          <h4>子组件 2</h4>
          <hr />
          <button @click="handle">按钮</button>
        </div>
      `,
      methods: {
        handle () {
          hub.$emit('myevent', this.age)
        }
      }
    })

    var vm = new Vue({
      el: '.box',
      data: {
        age: 3,
        num: null
      },
      methods: {
      }
    })
  </script>
</body>

</html>